<template>
  <div>
    <a-modal
      :visible="visible"
      :title="'支出报批单'"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="expenseApprovalForm-modal-Lu"
      @cancel="visible = false">
      <div style="width: 60%;margin: 0 auto;">
        <a-button v-print="printObj" class="blue-btn">打印</a-button>
        <div id="printTest" v-if="visible" class="expenseApprovalForm-print-box">
          <h1 class="letterSpan">支出报批单</h1>
          <div class="expenseApprovalForm-print-title-box" style="padding: 0 40px;">
              <span>
                <span class="Title">申报部门：</span>{{ '办公室' }}
              </span>
              <span>
                <span class="Title">填报日期：</span>
                {{ '2024' }} <span class="Title">年</span>
                {{ '1' }} <span class="Title">月</span>
                {{ '11'}}<span class="Title">日</span>
              </span>
            </div>
          <table border="1" cellspacing="0" class="expenseApprovalForm-table" :key="tableKey">
            <tr>
              <td style="text-align: left;">
                <span class="Title">用途：</span>
                {{ '新年团拜年舞蹈老师授课费50%' }}
              </td>
            </tr>
            <tr>
              <td style="text-align: left;display: flex;justify-content: space-between;">
                <span>
                  <span class="Title" style="margin-right: 20px;">金额（大写）：</span>
                  {{ 'x' }} <span class="Title">万</span>
                  {{ '贰' }} <span class="Title">仟</span>
                  {{ '柒' }} <span class="Title">佰</span>
                  {{ '伍' }} <span class="Title">拾</span>
                  {{ '零' }} <span class="Title">元</span>
                  {{ '零' }} <span class="Title">角</span>
                  {{ '零' }} <span class="Title">分</span>
                </span>
                <span style="text-align: right;padding-right: 30px;"><span class="Title">小写￥</span>{{ '1750' }}</span>
              </td>
            </tr>
            <tr>
              <td style="display: flex;padding: 0 !important;">
                <div style="flex: 1;border-right: 1px solid #5ca3e5;">
                  <p class="Title" style="text-align: left;padding-left: 5px;">单位领导批示：</p>
                  <p>{{ '属实' }}</p>
                  <p style="text-align: right;padding-right: 5px;margin-bottom: 10px;">
                    <span style="margin-right: 20px;">{{ 'XXX' }}</span>
                    {{ '1' }}
                    <span class="Title">月</span>
                    {{ '11' }}
                    <span class="Title">日</span>
                  </p>
                </div>
                <div style="flex: 1;">
                  <p class="Title" style="text-align: left;padding-left: 5px;">部门负责人审核：</p>
                  <p>{{ '属实' }}</p>
                  <p style="text-align: right;padding-right: 5px;margin-bottom: 10px;">
                    <span style="margin-right: 20px;">{{ 'XXX' }}</span>
                    {{ '1' }}
                    <span class="Title">月</span>
                    {{ '11' }}
                    <span class="Title">日</span>
                  </p>
                </div>
              </td>
            </tr>
          </table>
          <div class="expenseApprovalForm-print-title-box" style="padding: 10px 150px;">
            <span><span class="Title">会计：</span>{{ 'XXX' }}</span>
            <span><span class="Title">出纳：</span>{{ 'XXX' }}</span>
            <span><span class="Title">经办人：</span>{{ 'XXX' }}</span>
          </div>
          <div style="display: flex;padding-left: 10px;color: #5ca3e5;">
            <div>说明：</div>
            <div>
              <span>1、外来原始凭证粘贴单和大张的外来原始凭证应分项汇总填写此单。</span><br/>
              <span>2、审批程序：部门负责人→会计→单位领导批准。</span>
            </div>
          </div>
        </div>
      </div>
      <template slot="footer">
        <div>
          <a-button @click="visible = false" class="blue-btn">关闭</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      tableKey: '',
      printObj:{
        id:"printTest", //需要打印的id名称
        popTitle:"支出报批单",//文档的名称
        // preview:true,//预览功能，不好用
        zIndex:'20002',
        beforeOpenCallback(vue){
            // //console.log('打印回调',vue)
        },
        openCallback (vue) {//打开之前
            // //console.log('打开之前',vue)
        },
        closeCallback (vue) {//关闭了打印工具
            // //console.log('关闭了打印工具')
        },
      },
    }
  },
}
</script>
<style lang="less">
.expenseApprovalForm-print-box {
  font-size: 18px;
  font-family: 宋体;
  color: black;
  h1 {
    text-decoration: underline;
    text-align: center;
    color: #5ca3e5;
  }
  .expenseApprovalForm-table {
    width: 100%;
    text-align: center;
    table-layout: fixed;
    td {
      min-width: 10px;
      padding: 10px 5px !important;
    }
  }
  table {
    border-color: #5ca3e5;
    border-top: 2px solid #5ca3e5;
    border-left: 2px solid #5ca3e5;
    border-right: 2px solid #5ca3e5;
    border-bottom: 2px solid #5ca3e5;
  }
  h1 {
    color: #5ca3e5;
    font-weight: bold;
    letter-spacing: 4px;
    // font-size: 35px;
  }
  .Title {
    color: #5ca3e5;
    // font-weight: bold;
    text-align: center;
  }
  .letterSpan {
    // letter-spacing: 8px;
  }
  .td-rowspan {
    width: 1px !important;
    min-width: 1px !important;
    padding: 1px 0;
  }
  .expenseApprovalForm-print-title-box {
    display: flex;
    justify-content: space-between;
  }
}
</style>


